<template>
	<div class="uiwu">
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label="商品名称">
				<el-input v-model="formInline.keyword" placeholder="请输入" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getgetAllCategories()">搜索</el-button>
				<el-button @click="restSearch">重置</el-button>
			</el-form-item>
		</el-form>
		<el-button type="primary" @click="dialogVisible=true">添加分类</el-button>
		<div class="uiwu-table">
			<el-table :data="tableData" row-key="id" :tree-props="{ children: 'subCategories'}" style="width: 100%">
				<el-table-column prop="category_id" label="ID" align="center" width="100px" />
				<el-table-column prop="name" label="分类名称" align="center" />
				<el-table-column prop="createdAt" label="创建时间" align="center" />
				<el-table-column label="操作" align="center" width="180px" fixed="right">
					<template #default="{row}">
						<el-button type="primary" size="small" @click="editGoods(row)">编辑</el-button>
						<el-button type="danger" size="small" @click="deleteItem(row)">删除</el-button>
					</template>
				</el-table-column>

			</el-table>
			<uiwu-pagination :total="totalCount" @change="changePage"/>
		</div>
		<category-add ref="categoryAddRef" v-model="dialogVisible" @change="restSearch"/>
		
	</div>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { getGoodsCateListApi , deleteGoodsCateApi } from '@/api/goods';
	import { ElMessage, ElMessageBox } from 'element-plus'
	import categoryAdd from './components/CategoryAdd.vue';
	import uiwuPagination from '@/components/uiwu-pagination/uiwu-pagination.vue';
	interface User {
		category_id : number
		created_time : string
		image : string
		name : string
		level : number
		parent_id : number
		updated_time : string
		hasChildren ?: boolean
		children ?: User[]
	}
	const categoryAddRef = ref(null);
	const dialogVisible = ref(false)
	const totalCount = ref(0)
	const currentPage = ref(1)
	const tableData = ref<Array<any>>([])
	const formInline = ref({
		keyword: ''
	})
	/**
	 * 获取分类列表
	 * @returns
	 */
	const getgetAllCategories = async () : Promise<any> => {
		const res:any = await getGoodsCateListApi({
			parent_id: 0,
			level: 1,
			page: currentPage.value,
			limit: 10,
			...formInline.value
		})
		totalCount.value = res.total
		tableData.value =  res.data;
	}
	const changePage = (e:number)=> {
		currentPage.value = e
		getgetAllCategories()
	}
	const restSearch = () => {
		formInline.value = {
			keyword: '',
			status: ''
		}
		getgetAllCategories()
	}
	/**
	 * 编辑
	 */
	const editGoods = (row : any) => {
		dialogVisible.value = true
		categoryAddRef.value.editFuon(row)
	}
	/**
	 * 删除
	 */
	const deleteItem = (row : any) => {
		ElMessageBox.confirm('是否删除该分类?','温馨提示', {
		    confirmButtonText: '确定',
		    cancelButtonText: '取消',
		    type: 'warning',
		}).then(async() => {
			const { message } = await deleteGoodsCateApi(row.id)
			ElMessage.success(message)
			getgetAllCategories()	
		}).catch()
	}
	onMounted(() => {
		getgetAllCategories()
	})
</script>

<style scoped>
	.demo-form-inline {
		background-color: #fff;
		margin-bottom: 16px;
		padding: 16px 16px 0 16px;
		border-radius: 4px;
	}

	.uiwu-table {
		margin-top: 16px;
		background-color: #fff;
		padding-bottom: 16px;
	}
</style>